<template>
	<view class="order">
    <view class="flex-row align-center">
      <u-avatar src="https://picsum.photos/id/541/200/200" bg-color="#FF8D4F" size="64"></u-avatar>
      <view class="name u-font-26 u-p-16 u-line-1" style="width: 400rpx;margin-right: auto;">奇呱平台</view>
      <view class="status u-font-24" :style="{ color: statusColor }">{{status}}</view>
    </view>
    
    <view class="items">
      <view class="item" v-for="i in 2" :key="i">
        <image class="pic" src="https://picsum.photos/id/542/300/300"></image>
        <view class="flex-col" style="width: 470rpx;height: 160rpx;">
          <view class="name u-font-28 u-line-1">美特斯邦威夹克</view>
          <view class="flex-row align-center u-m-t-16 u-font-24" style="color: #999;">
            <view class="tag">M码;绿色</view>
            <view class="count u-m-l-16">x1</view>
          </view>
          <view class="price" style="margin-top: auto;">¥69.0</view>
        </view>
      </view>
    </view>
    
    <view class="total">
      <view class="u-font-24" style="color: #A6A6A6;">共2件商品</view>
      <view class="u-font-24 u-p-l-16">合计:</view>
      <view class="u-font-32">￥138</view>
    </view>
    
    <view class="btns">
      <slot name="btns"></slot>
    </view>
  </view>
</template>

<script>
	export default {
    props: {
      status: String,
      statusColor: {
        type: String,
        default: '#ff744d'
      }
    },
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
  .order {
    width: 702rpx;
    padding: 24rpx;
    border-radius: 24rpx;
    background: #fff;
    
    .items {
      padding-top: 24rpx;
    }
    
    .item {
      display: flex;
      justify-content: space-between;
    }
    
    .item + .item {
      margin-top: 24rpx;
    }
    
    .tag {
      background: #F0F0F0;
      padding: 8rpx;
    }
    
    .pic {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
    
    .total {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
</style>
